<template>
  <div class="nav-bar">
    <NavTabs />
    <NavMenus />
  </div>
</template>

<script setup>
import { useConfig } from '@/stores/config'
import NavTabs from './tabs.vue'
import NavMenus from '../navMenus.vue'
const config = useConfig()
</script>

<style scoped>
.nav-bar {
  display: flex;
  height: 50px;
  margin: 20px var(--ba-main-space) 0 var(--ba-main-space);
}

.nav-bar :deep(.nav-tabs) {
  display: flex;
  height: 100%;
  position: relative;
}

.nav-bar :deep(.nav-tabs) .ba-nav-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  cursor: pointer;
  z-index: 1;
  user-select: none;
  opacity: 0.7;
  color: v-bind('config.getColorVal("headerBarTabColor")');
}

.nav-bar :deep(.nav-tabs) .ba-nav-tab .close-icon {
  padding: 2px;
  margin: 2px 0 0 4px;
}

/*.nav-bar :deep(.nav-tabs) .ba-nav-tab .close-icon:hover {*/
/*  background: var(--ba-color-primary-light);*/
/*  color: var(--el-border-color) !important;*/
/*  border-radius: 50%;*/
/*}*/

.nav-bar :deep(.nav-tabs) .ba-nav-tab.active {
  color: v-bind('config.getColorVal("headerBarTabActiveColor")');
}

.nav-bar :deep(.nav-tabs) .ba-nav-tab:hover {
  opacity: 1;
}

.nav-bar :deep(.nav-tabs) .nav-tabs-active-box {
  position: absolute;
  height: 40px;
  border-radius: var(--el-border-radius-base);
  background-color: v-bind('config.getColorVal("headerBarTabActiveBackground")');
  box-shadow: var(--el-box-shadow-light);
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
}
</style>
